<script setup lang="ts">
import GlobalSider from './modules/sider/index.vue'
import GlobalHeader from './modules/header/index.vue'
import { useAppStore, useThemeStore } from '@/stores'

defineOptions({
  name: 'BaseLayout'
})

const appStore = useAppStore()
const themeStore = useThemeStore()
</script>

<template>
  <n-layout has-sider>
    <n-layout-sider
      :native-scrollbar="false"
      collapse-mode="width"
      :collapsed-width="64"
      :width="220"
      :collapsed="appStore.isCollapsed"
    >
      <GlobalSider />
    </n-layout-sider>

    <n-layout class="global-content"
      ><n-layout-header>
        <GlobalHeader />
      </n-layout-header>
      <n-layout-content
        content-style="padding: 20px;"
        class="global-content-main"
        :class="{ 'global-content-background': !themeStore.getCurrentTheme }"
        :native-scrollbar="false"
      >
        <router-view />
      </n-layout-content>
      <n-layout-footer style="height: 56px">
        <n-space justify="center">
          <div class="footer">
            <span>管理系统</span>
          </div>
        </n-space>
      </n-layout-footer>
    </n-layout>
  </n-layout>
</template>

<style scoped>
.global-content-main {
  height: calc(100vh - 56px - 56px);
}
.global-content-background {
  background-color: rgb(238, 243, 246);
  transition: background-color 0.3s;
}

.footer {
  display: flex;
  align-items: center;
  height: 56px;
  font-size: 16px;
}
</style>
